<template>
  <el-config-provider :locale="zhCn">
    <router-view />
    <!-- 这里放个容器挂载Coze聊天窗口 -->
    <div id="coze-chat-container"></div>
  </el-config-provider>
</template>

<script setup>
import { onMounted } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 定义 Element Plus 中文配置
const zhCnLocale = zhCn

onMounted(() => {
  // 动态加载Coze SDK脚本
  const script = document.createElement('script')
  script.src =
    'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js'
  script.async = true
  script.onload = () => {
    // SDK加载完成，初始化聊天窗口
    new window.CozeWebSDK.WebChatClient({
      config: {
        bot_id: '7517936452341497871',
      },
      componentProps: {
        title: 'Coisn',
        icon: 'http://localhost:8181/OIP-C.jpg', // 假设官方支持
        // 如果需要，可以指定容器挂载点，例如：
        // container: document.getElementById('coze-chat-container')
      },
      auth: {
        type: 'token',
        token:
          'pat_3qHUhxU960244SqSEzz1ZEoa1zZ3nSMaj8UQfbRF9CKmWikaEslo5QodwauOKUPq',
        onRefreshToken: function () {
          return 'pat_3qHUhxU960244SqSEzz1ZEoa1zZ3nSMaj8UQfbRF9CKmWikaEslo5QodwauOKUPq'
        },
      },
    })
  }
  document.body.appendChild(script)
})
</script>

<style>
@import './assets/css/main.css';

img[src="http://localhost:8181/OIP-C.jpg"]
{
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
}

.coze-logo {
  display: none !important;
}
</style>
